<!-- d3知识图谱 -->
<template>
  <div class="d3_container">
    <d3-search class="d3_search" @getSearch="getSearch" @toggleCollapse="toggleCollapse"></d3-search>
    <d3-content class="d3_content" :data="data" :config="config"></d3-content>
  </div>
</template>

<script>
import d3Search from './d3Search'
import d3Content from './d3Content'
import { HZData, CFData } from './testData.js' //测试数据
import { link } from 'fs';
export default {
  components: { d3Search, d3Content },
  data() {
    return {
      search: {
        keyword: '',
        startTime: '',
        endTime: '',
        YHLX: 'ZDHZ',
      },
      nodes: [],
      links: [],//
      data: {},//处理后的数据
      config: {//配置
        control: true,//控件是否显示
        isCollapse: false,
        textDisplay: true,//控制关联文字显隐
        colors: ['#FFC0CB', '#55cccc', '#aaaaff', '#ca635f', '#BA55D3', '#1E90FF', '#4e88af'],//控制各级节点的背景颜色
        nodeSize: 50,//node节点大小
        textLineDisplay: true,//节点之间的关系内容是否默认显示
        node_category: [{ value: true, label: '隐患项', color: '#7FFFD4' }, { value: true, label: '相关案例', color: '#4e88af' }],//分类------(根据自己接口返回的数据进行调整)
      },

    }
  },
  mounted() { },
  methods: {
    //切换折叠
    toggleCollapse(isCollapse) {
      this.config.isCollapse = isCollapse
    },
    //获取搜索条件
    getSearch(query) {
      // console.log(query,'getSearch')
      this.search = query
      this.getData()
    },

    //获取数据---在这儿调用接口获取后台数据
    async getData() {
      try {
        let rulest
        //在这儿调用接口获取后台数据

        // rulest = await post('/api/xxxx', { keyword: this.search.keyword, type: this.search.type })
        // console.log(rulest, 'rulest')
        /**----------------------------------------获取死数据-树结构------------------------------------------- */
        let timer = setTimeout(() => {
          if (this.search.type == 'HZ') {
            rulest = HZData
          } else {
            rulest = CFData
          }
          this.formateData(rulest)
          clearTimeout(timer)
        }, 1000)
      } catch {

      }
    },

    //处理接口返回来的数据
    formateData(data) {
      console.log(data, 'data')
      let nodes = []
      let links = []

      data.forEach((item, index) => {
        //存在相关案例
        if (item.YHRWXX && item.YHRWXX.length) {
          item.YHRWXX.forEach(ite => {
            if (nodes.length) {//判断是否第一次(第一次nodes为空)
              if (!nodes.some(it => it.id == ite.DWID)) { nodes.push({ ...ite, id: ite.DWID, name: ite.DWMC, pid: item.ID, pids: [item.ID], level: parseInt(item.TREE_LEVEL) + 1 + '', relation: '相关案例' }); }
              else {
                nodes.forEach((a, index) => {
                  if (a.id == ite.DWID) {
                    // debugger
                    if (a.level < item.level) { a.level = parseInt(item.level) + 1 }
                    if (!a.pids.includes(item.ID)) { a.pids.push(item.ID) }
                  }
                })
              }
            } else {
              nodes.push({ ...ite, id: ite.DWID, name: ite.DWMC, pid: item.ID, pids: [item.ID], level: parseInt(item.TREE_LEVEL) + 1 + '', relation: '相关案例' });
            }

          })
        }

        nodes.push({ ...item, id: item.ID, name: item.CODE_DESC, pid: item.PARENT_ID, level: item.TREE_LEVEL, relation: '隐患项' })
      })
      console.log(nodes, 'nodes-----')

      for (let i = 0; i < nodes.length - 1; i++) {
        // for (let j = i + 1; j < nodes.length; j++) {

        if (nodes[i].pids && nodes[i].pids.length) {
          for (let a = 0; a < nodes[i].pids.length; a++) {
            links.push({ source: nodes[i].pids[a], target: nodes[i].id, relation: nodes[i].relation })
          }
        } else {
          // if(nodes.some(it => it.id == nodes[i].pid)) {links.push({ source: nodes[i].pid, target: nodes[i].id, relation: nodes[i].relation })}
          for (let j = i + 1; j < nodes.length; j++) {
            if (nodes[i].id == nodes[j].pid) {
              links.push({ source: nodes[i].id, target: nodes[j].id, relation: nodes[j].relation })
            } else if (nodes[i].pid == nodes[j].id) {
              links.push({ source: nodes[j].id, target: nodes[i].id, relation: nodes[j].relation })
            }
          }
        }

      }
      console.log(nodes, links, 'linkslinkslinks')
      this.data = { nodes, links }
    },






  }
}
</script>

<style lang="scss" scoped>
.d3_container {
  overflow: hidden;
  background: #fff;
}
</style>
